<template>
    <div class="cursor-pointer" @click="dlgVisible = !dlgVisible">
        <span class="me-1">{{ data.date }}</span>
        <span class="me-1">{{ data.time }}</span>
        <span class="text-red-600" title="今晚开奖哦~" v-if="drawDays.includes(data.w)">星期{{ data.w }}</span>
        <span v-else>星期{{ data.w }}</span>
        <CalendarDialog v-model="dlgVisible"></CalendarDialog>
    </div>
</template>

<script setup>
/**
 * 时钟组件
 * @version 1.0.0
 */
import { ref } from 'vue';
import CalendarDialog from './CalendarDialog.vue';

const dlgVisible = ref(false);

const data = ref({
    time: '',
    date: '',
    w: '--',
});

let oDate = null, date = null, week = ['日', '一', '二', '三', '四', '五', '六'], drawDays = ['一', '三', '六'];
setInterval(() => {
    date = new Date();
    oDate = {
        m: zeroize(date.getMonth() + 1, 2, '0'),
        d: zeroize(date.getDate(), 2, '0'),
        h: zeroize(date.getHours(), 2, '0'),
        i: zeroize(date.getMinutes(), 2, '0'),
        s: zeroize(date.getSeconds(), 2, '0'),
        w: week[date.getDay()],
    }
    data.value.time = `${oDate.h}:${oDate.i}:${oDate.s}`;
    data.value.date = `${oDate.m}/${oDate.d}`;
    data.value.w = oDate.w;
}, 1000);

// 填零
const zeroize = (str, length, padString, padType = 0) => {
    if (typeof (str) == "undefined" || str == null) {
        return str;
    }
    if (typeof (str) != "string") {
        str = str.toString();
    }
    if (str.length >= length) {
        return str;
    }
    let padStr = padString.repeat(length - str.length)
    return padType == 1 ? (str + padStr) : (padStr + str);
}
</script>